<template>
    <div class="">
        <div class="mask" id="mask" v-if="getStatus" @click="hideMask" ></div>
        <div class="confirm" v-if="getStatus">
            <div class="confirm-content">{{OptionData.title}}</div>
            <div class="confirm-fotter">
                
                <span class="canle" style="margin-right:0;" @click="ok"> {{OptionData.cancle}}</span>
                <span class="ok" style="margin-right:33px;" @click="hideMask">{{OptionData.ok}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    data(){
        return {
            isShowShow:this.getStatus
        }
    },
    props:{
        OptionData:{
            type:Object,
            default:function(){
                return {
                    title:"您确定要删除这个币种地址？",
                    cancle:"取消",
                    ok:"确定"
                }
            }
        }
    },
    computed:{
         ...mapState([
            "pageInfo", //页面初始化数据
        ]),
        getStatus(){
            this.isShowShow = this.pageInfo.confirm;
            return this.pageInfo.confirm
        }
    },
    methods:{
        ...mapMutations([
            "SHOWCONFIRM",
            "HIDCONFIRM"
        ]),
        hideMask(){
            this.$emit('canle')
            this.HIDCONFIRM();
        },
        ok(){
            this.$emit('ok')
            this.HIDCONFIRM();
        }
    },
    mounted(){
        
    },
    created(){
        this.isShowShow = this.pageInfo.confirm;
        
    },
     watch: {
        isShowShow(newVal, oldVal) {
            if (newVal) {
                let cssStr = "overflow-y: hidden; height: 100%;";
                document.getElementsByTagName('html')[0].style.cssText = cssStr;
                document.body.style.cssText = cssStr;
                document.getElementById("app").style.cssText = cssStr;
                var shield=document.getElementById("mask");
                shield.addEventListener("touchstart",function(e){
                    e.stopPropagation();
                    // e.preventDefault();
                },false);
            } else {
                let cssStr = " height: auto;";
                document.getElementsByTagName('html')[0].style.cssText = cssStr;
                document.body.style.cssText = cssStr;
            }

            // 下面需要这两行代码，兼容不同浏览器
            document.body.scrollTop = this.pageScrollYoffset;
            window.scroll(0, this.pageScrollYoffset);

        }
  }
}
</script>

<style scoped>
.mask{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #575757;
    opacity: 0.5332;
    z-index: 2000;
}
.confirm{
    width:273px;
    height:83px;
    background:rgba(255,255,255,1);
    border-radius:8px;
    border:1px solid rgba(151,151,151,1);
    z-index: 2001;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;;
    margin: auto;
    padding: 21px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    /* transform: translate(-50%);
    transform: translateY(-50%); */
}
.confirm-content{

}
.confirm-fotter{
    display: flex;
    flex-flow: row-reverse;
    /* justify-content: ; */
}
.ok{
 color: #888888;
 margin-right: 33px;
}
.canle{

}
</style>
